<template>
	<div class="common-header-wrap">
		<mt-header class="common-header" title="购物车">
			<mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
			<mt-button slot="right" @click="changeFinishStatus()" v-if="!isFinish && !isEmpty">编辑</mt-button>
			<mt-button slot="right" @click="changeFinishStatus()" v-if="isFinish">完成</mt-button>
		</mt-header>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			isFinish: false //是否是完成状态 编辑-完成false  ： 完成 - 编辑 true  s - true - false
		}
	},

	props: {
		issShowTabbar: {
			type: Number,
			default: 0
		},
		isEmpty: {
			type: Boolean,
			default: false
		}
	},

	computed: {},

	methods: {
		/*
		 * goBack: 返回上一页
		 */
		goBack() {
			this.$router.go(-1)
		},

		/*
		 *  changeFinishStatus: 点击编辑和完成向父组件发送事件， 编辑状态， 列表默认全选， 完成状态默认全部不选中, 并改变是否是完成的状态
		 */
		changeFinishStatus() {
			this.isFinish = !this.isFinish
			let data = { isFinish: this.isFinish }
			this.$parent.$emit('change-list-selected', data)
		}
	}
}
</script>

<style lang="scss" scoped>
.cart-header-wrapper {
	position: fixed;
	width: -webkit-fill-available;
	span {
		position: absolute;
		font-size:0.75rem;
		color: rgba(78, 84, 93, 1);
		display: inline-block;
		height:2.2rem;
		line-height:2.2rem;
		top: 0;
		right:0.75rem;
	}
}
</style>
